<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
  $(function(){

      var SHAKE_THRESHOLD = 1300;
    var last_update = 0;
    var x = y = z = last_x = last_y = last_z = 0;
    if(window.DeviceMotionEvent) {
    	window.addEventListener('devicemotion', deviceMotionHandler, false);
    }
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if((curTime - last_update) > 100) {
var diffTime = curTime - last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
if(speed > SHAKE_THRESHOLD) {
 document.getElementById('musicBox').play();
 alert('摇一摇');
};
last_x = x;
last_y = y;
last_z = z;
};
    };
	
	
	  });    
     
      </script>
</head>

<body ontouchstart class="page-bg">
<div class="page-hd">
        <h1 class="page-hd-title">
            摇一摇
        </h1>
        <p class="page-hd-desc">摇一摇效果</p>
    </div>
<audio style="display:block" id="musicBox"  src="v4.mp3"></audio>
</body>
</html>
